<template>
    <div id="app">
        <!-- <sib01 :num="2"/>
    <sib02 />
    <hr>
    <h1>ref</h1>
    <ref-parent />
    <hr>
    <h1>easystore</h1>
    <easy-store-com-a />
    <easy-store-com-b /> -->
        <h1>Vuex - Demo</h1>
        count: {{ num }} <br />
        msg: {{ message }} <br />

        <h2>getter</h2>
        reverseMsg: {{ reverseMsg }}

        <h2>mutation</h2>
        <button @click="increate(2)">mutation</button>

        <h2>action</h2>
        <button @click="increateAsync(6)">action</button>

        <h2>module</h2>
        <!-- products: {{$store.state.products.products}} <br>
        <button @click="$store.commit('setProducts', [])">module</button> -->
        products: {{ products }} <br />
        <button @click="setProducts([])">module</button>

        <h2>strict</h2>
        <button @click="$store.state.msg = 'yyy'">strict</button>
    </div>
</template>

<script>
// import sib01 from './components/03-event-bus/03-Sibling-01'
// import sib02 from './components/03-event-bus/03-Sibling-02'
// import refParent from './components/04-ref/04-Parent'
// import easyStoreComA from './components/05-easystate/05-componentA'
// import easyStoreComB from './components/05-easystate/05-componentB'
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
export default {
    name: "App",
    components: {
        // sib01,
        // sib02,
        // refParent,
        // easyStoreComA,
        // easyStoreComB
    },
    computed: {
        // ...mapState(['count', 'msg'])
        ...mapState({
            num: "count",
            message: "msg",
        }),
        ...mapGetters(["reverseMsg"]),
        ...mapState("products", ["products"]),
    },
    methods: {
        ...mapMutations(["increate"]),
        ...mapActions(["increateAsync"]),
        ...mapMutations('products', ['setProducts'])
    },
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
